<template>
<div class="tool">
    <div class="logo">
        <img src="../assets/logo.jpg" alt="">
    </div>
    <div class="iconBox">
        <div class="icon" @click="newChat">
            <i class="iconfont icon-_xiaoxi"></i>
            <span class="tooltip">开启新对话</span>
        </div>
        <div class="icon" @click="history">
            <i class="iconfont icon-lishijilu"></i>
            <span class="tooltip">历史记录</span>
        </div>
        <div class="icon" @click="analyse">
            <i class="iconfont icon-zhuzhuangtu--copy"></i>
            <span class="tooltip">数据分析</span>
        </div>
        <div class="icon" @click="toCenter">
            <i class="iconfont icon-yonghu" v-if="!getToken()"></i>
            <img src="../assets/userAvatar.png" alt="" v-if="getToken()">
            <span class="tooltip">个人中心</span>
        </div>
    </div>
</div>
</template>

<script setup>
import { getToken } from '../utils/setToken'
import { inject } from 'vue'
import { ElMessage } from 'element-plus'
import { SetID } from '../store/setID'
import { useRouter } from 'vue-router'

//实例化pinia
const SetIDStore=SetID()
const router = useRouter()
//开启新对话
const newChatFlag=inject('newChat')
const newChat = () => {
    SetIDStore.removeID()
    newChatFlag.value=true
    //消息提示
    ElMessage({
        type: "success",
        message: "即将开始新对话",
        duration:1500
    })
}
const analyse = () => {
    SetIDStore.removeID()
    newChatFlag.value=true
    //消息提示
    ElMessage({
        type: "success",
        message: "即将进入数据分析，请先上传文件！",
        duration:1500
    })
}

//开启聊天记录
const showDrawer = inject('showDrawer')
const history = () => {
    showDrawer.value=true
}

const toCenter = () => {
    if (!getToken()) {
        router.push({ path: '/login' })
        return
    }
    router.push({ path: '/dashboard' })
}
</script>

<style  lang="scss" scoped>
.tool{
    position: fixed;
    top: 40%;
    left: 40px;
    width: 47px;
    height: 252px;
    border-radius: 24px;
    border: 1px solid #D8D8D8;
    background-color: #fff;
    padding: 10px 4px;
    .logo{
        width: 34px;
        height: 34px;
        margin-left: 3px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .iconBox{
        margin-left: 3px;
        margin-top: 6px;
        padding: 7px 0;
        border-top:1px solid #D8D8D8 ;
        border-bottom:1px solid #D8D8D8  ;
        text-align: center;
        .icon{
            margin: 13px 0;
            position: relative;  
            cursor: pointer;
            .tooltip {
                position: absolute;
                left: calc(100% + 10px);
                top: 50%;
                transform: translateY(-50%);
                background: white;
                border: 1px solid #D8D8D8;
                border-radius: 4px;
                padding: 6px 12px;
                font-size: 12px;
                white-space: nowrap;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                opacity: 0;
                visibility: hidden;
                transition: all 0.2s ease;
                pointer-events: none;
                z-index: 100;

                &::before {
                    content: "";
                    position: absolute;
                    left: -5px;
                    top: 50%;
                    transform: translateY(-50%);
                    border-width: 5px 5px 5px 0;
                    border-style: solid;
                    border-color: transparent #fff transparent transparent;
                }
            }

            &:hover .tooltip {
                opacity: 1;
                visibility: visible;
                left: calc(100% + 15px);
            }
            &:nth-last-child(1){
                margin-bottom: 3px;
            }
            &:nth-child(1){
                margin-top: 5px;
            }
            .iconfont{
                font-size: 20px !important;
            }
            img{
                width: 95%;
                height: 95%;
            }
        }
    }
}
</style>
